<template>
	<view class="content login-page">
		<cu-custom bgColor="" :isBack="true"></cu-custom>
		<!-- <image class="logo" src="/static/img/logo@3x.png"></image> -->
		<view class="nav-box">
			<view class="n-b-login">登录</view>
			<view class="n-b-reg" @tap="goPage('reg')">注册</view>
		</view>
		<view class="input-group">
			<m-input type="number" clearable v-model="params.mobile" placeholder="请输入手机号" :icon="'../../static/img/phone.png'"  :maxLength="11" :focus="true"></m-input>
			<m-input type="password" clearable v-model="params.password" placeholder="输入您的密码" :icon="'../../static/img/password.png'" :maxLength="20"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.code" :icon="'../../static/img/yanzheng.png'" placeholder="请输入验证码" :maxLength="6"
			 :imageCode="true"></m-input>
			<button type="primary" class="i-g-login pub-btn" @tap="bindLogin()" :loading="submitBtnDis">登录</button>
		</view>
		<view class="forget" @tap="goPage('forget')">忘记密码?</view>
		<!-- <view class="input-group">
			<h1>登录 <span @tap="goPage('reg')">注册</span></h1>
			<m-input type="number" clearable v-model="params.mobile" placeholder="请输入手机号" :maxLength="11" :focus="true"></m-input>
			<m-input type="password" clearable v-model="params.password" placeholder="输入您的密码" :maxLength="11"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.code" placeholder="输入您的图形验证码" :maxLength="6"
			 :imageCode="true"></m-input>
			<view class="forget" @tap="goPage('forget')">忘记密码</view>
			<button type="primary" class="primary" @tap="bindLogin" :loading="submitBtnDis">登录</button>
		</view> -->
		<view class="padding fixed">
			<text class="text-sm text-white">登录/注册即表示您已阅读并同意</text><text class="text-white text-sm" @tap="goAgreement('agreement','user')">《用户注册服务协议》</text>
			<text class="text-white text-sm" @tap="goAgreement('agreement','service')">《投资人服务协议》</text>
			<text class="text-white text-sm" @tap="goAgreement('agreement','tzfx')">《投资风险承诺书》</text>
			<text class="text-white text-sm" @tap="goAgreement('agreement','dzxy')">《电子签名授权协议》</text>
			<text class="text-white text-sm" @tap="goAgreement('agreement','wtkj')">《委托快捷签署协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				btnDis: false,
				submitBtnDis: false,
				btnText: "发送验证码",
				params: {
					mobile: "",
					password: "",
					code: ""
				},
				reqBody: {},
				checked: false
			}
		},
		onLoad(query) {
			this.initredirectRouteData(query);
		},
		onShow() {
			this.$refs.imageCode.getImgCode();
			try {
				var value = wx.getStorageSync('sessionId')
			} catch (e) {
				this.getSessionId()
			}
		},
		computed: {
			...mapState(["openId"]),
			...mapGetters(['hasLogin'])
		},
		methods: {
			async getSessionId() {
				let res = await this.$apis.getSessionId();
				uni.setStorageSync('sessionId', res.session_id);
			},
			goAgreement(routeName, type) {
				this.$mRouter.push({
					route: this.$mRoutesConfig[routeName],
					query: {
						type: type
					}
				})
			},
			goPage(routeName) {
				let page = getCurrentPages()
				let redirecte = true
				if (page.length > 1) {
					console.log(page)
					if (page[page.length - 1].route.indexOf(routeName) !== -1) {
						redirecte = true
					} else {
						redirecte = false
					}
				} else {
					redirecte = false
				}
				if (redirecte) {
					this.$mRouter.back(-1)
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig[routeName],
					})
				}
			},
			initredirectRouteData(query) {
				if (query.redirectUrl) {
					this.redirectRoute.path = query.redirectUrl;
					delete query.redirectUrl;
					this.routeQuery = query;
				}
			},
			// 登录
			async bindLogin() {
				try {
					this.reqBody["mobile"] = this.params["mobile"];
					this.reqBody["code"] = this.params["code"];
					this.reqBody["password"] = this.params["password"];

					let checkRes = graceChecker.check(this.reqBody, formRuleConfig.loginRule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// if (!this.checked) {
					// 	uni.showToast({
					// 		title: '尚未同意协议',
					// 		icon: "none"
					// 	});
					// 	return;
					// }
					// 校验通过...
					this.submitBtnDis = true
					let userInfo = await this.$apis.login(this.reqBody);
					console.log(userInfo)
					this.submitBtnDis = false
					this.$store.commit("SET_USERINFO", userInfo || {});
					this.$store.commit("SET_TOKEN", userInfo.token);
					let page = getCurrentPages()
					if (page.length > 1 && (page[page.length - 1].route.indexOf('reg') !== -1)) {
						this.$mRouter.back();
					} else {
						this.$mRouter.switchTab({
							route: this.$mRoutesConfig.main
						})
					}
				} catch (e) {
					this.submitBtnDis = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative;
		background-image: url("https://test.hrycf.com/hryxcx/loginBg2.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		text-align: center;
	}
    .nav-box{
    	width: 433rpx;
    	height: 76rpx;
    	margin:264rpx auto 0rpx ;
    	border-radius: 38rpx;
    	background-color: #ffffff;
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    	.n-b-reg{
    		width:216rpx;
    		height: 60rpx;
    		text-align: center;
    		line-height: 60rpx;
    	}
    	.n-b-login{
    		width:216rpx;
    		height: 60rpx;
    		text-align: center;
    		line-height: 60rpx;
    		background: #F99F60;
    		border-radius: 30rpx;
    		box-shadow: 0 5rpx 3px rgba(237, 79, 60, 0.57);
    		margin-left: 10rpx;
    		color:#ffffff
    	}
    }
	.logo {
		width: 275rpx;
		height: 87rpx;
		margin: 17rpx auto 47rpx;
	}

	.input-group {
		width: 563rpx;
		margin: 41rpx auto 0;
		padding: 60rpx 30rpx 115rpx;
		background-color: #fff;
		// border-radius: 10upx;
		border-radius: 10rpx;
		text-align: left;
		position: relative;

		h1 {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgba(255, 106, 0, 1);
			margin-bottom: 48rpx;

			span {
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(40, 56, 71, 1);
				margin-left: 52rpx;
			}
		}

		.primary {
			position: absolute;
			bottom: -50rpx;
			background-color: #FF6A00;
			width: 328rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
		.pub-btn{
			width: 466rpx;
			height: 100rpx;
			position: absolute;
			bottom: -50rpx;
			left: 50%;
			margin-left: -233rpx;
			background: linear-gradient(to right, #EC4537, #FBAB66);
			text-align: center;
			line-height: 100rpx;
			border-radius: 15rpx;
			color: #ffffff;
			box-shadow: 5rpx 5rpx 3px rgba(0, 0, 0, 0.18);
		}
	}

	.tips {
		padding-left: 20upx;
		margin-top: 20upx;
		color: #8c8c8c;
		font-size: 26upx;
	}

	.vs {
		position: absolute;
		bottom: 70upx;
		text-align: center;
		width: 100%;
	}

	.forget {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		// line-height: 80rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 93rpx;
		text-decoration: underline;
	}

	.sendCode {
		display: flex;
		align-items: center;
		padding-right: 20upx;
		box-sizing: border-box;
		align-items: stretch;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200upx;
			background: #0faeff;
			color: #fff;
			border-radius: 0;
			font-size: 26upx;

			&::after {
				display: none;
			}
		}
	}

	.fixed {
		text-align: left;
		position: absolute;
		bottom: 60rpx;
	}
</style>
